<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/mui.picker.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<link rel="stylesheet" type="text/css" href="css/homeReservation.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">漫鹿CC酒店（西安港务大道地铁站店）</h1>
		</header>
		<div class="top-tips">
			整晚保留 预订成功后房间将为您保留整晚
		</div>
		<div class="write-change-info">
			<div class="day-content">
				<span class="day-font" id="beginDate">
					05月04日
				</span>今天-
				<span class="day-font" id="endDate">
					05月05日
				</span>明天共
				<span id="dayNum">
					1
				</span>晚
			</div>
			<div onclick="showRoomInfo()" class="day-room-info">
				<div style="display: flex;justify-content: space-between;">
					<div>
						<div class="font16">漫选特惠随机房</div>
						<div class="font9">无餐食丨有窗丨部分禁烟丨大床</div>
					</div>
					<div style="display: flex;align-items: center;">
						<div class="font9">房型详情</div>
						<div style="transform: rotate(-90deg);margin-left: 15px;">
							<img src="./images/arrow.png" style="width: 14px;height: 14px">
						</div>
					</div>
				</div>
			</div>
			<div class="cancel-tips">
				<img src="./images/ban.png" style="width: 14px;height: 14px" alt="">
				不可取消
			</div>
			<div onclick="orderRead()" class="day-room-info">
				<div style="display: flex;justify-content: space-between;">
					<div>
						<div class="font9">· 仅接待大陆客人</div>
						<div class="font9">· 入住时间：14:00以后 离店时间：12:00以前</div>
					</div>
					<div style="display: flex;align-items: center;">
						<div class="font9">订房必读</div>
						<div style="transform: rotate(-90deg);margin-left: 15px;">
							<img src="./images/arrow.png" style="width: 14px;height: 14px">
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 入住信息 -->
		<div class="write-change-info">
			<div class="content-title">
				入住信息
			</div>
			<div class="content-form-item">
				<div class="item-name">房间数</div>
				<div class="form-item-content">
					<input id="roomNum" type="text" value="">
				</div>
			</div>
			<div class="content-form-item">
				<div class="item-name">入住人</div>
				<div class="form-item-content">
					<input id="arrivePerson" type="text" value="">
				</div>
			</div>
			<div class="content-form-item">
				<div class="item-name">联系电话</div>
				<div class="form-item-content">
					<input id="phoneNumber" type="number" value="">
				</div>
			</div>
			<div class="content-form-item" style="border: 0;">
				<div class="item-name">预计到店</div>
				<div class="form-item-content">
					<input id="arriveTime" type="text" value="">
				</div>
			</div>
		</div>
		<div class="write-change-info">
			<div class="content-title">
				本单可享
				<div style="font-size: 11px;">
					已享最大优惠<span style="color: #D9001B;">￥110</span>
				</div>
			</div>
			<div class="content-form-item">
				<div class="item-name">联系电话</div>
				<div class="form-item-content">
					<div style="color: #D9001B;font-size: 10px;background-color: #fdeee6;padding: 0 4px;">
						已优惠￥5
					</div>
				</div>
			</div>
			<div class="content-form-item" style="border: 0;">
				<div class="item-name">预计到店</div>
				<div class="form-item-content">
					<div style="color: #D9001B;font-size: 10px;background-color: #fdeee6;padding: 0 4px;">
						已优惠￥5
					</div>
				</div>
			</div>
		</div>
		<div class="write-change-info">
			<div class="content-title">
				发票信息
			</div>
			<div class="content-form-item" style="border: 0;">
				<div class="item-name">房间数</div>
				<div class="form-item-content" style="align-items: unset;">
					如需发票，请向酒店前台索取（酒店可提供普票、无法提供专票）
				</div>
			</div>
		</div>

		<!-- 支付方式弹窗 -->
		<div id="choosePay" style="height: 60%;z-index: 9999;"
			class="mui-popover mui-popover-action mui-popover-bottom">
			<div id="choosePay" class="travel-reminder">
				<img id="closePop" class="popClose" src="./images/close.png" alt="">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div onclick="closePay()" class="popTitle">选择支付方式</div>
						<div
							style="width: 100%;height: 50%; overflow-y: scroll;margin-top: 10px;padding:0 15px;background-color:#ffffff ;">
							<div class="content-form" style="font-size: 13px;color: #AAAAAA;">请在<span
									style="color: #D9001B;" id="min">
									29
								</span>分<span style="color: #D9001B;" id="second">
									59
								</span>秒内完成支付</div>
							<div style="margin-top: 10px;">
								<div class="payment-method" style="">
									<div class="payment-method-left">
										<img style="width: 24px;height: 24px;" src="./images/wchat.png" alt="">
									</div>
									<div class="payment-method-right">
										<div style="color: #333333;font-size: 14px;">微信支付</div>
										<img onclick="choosePay(this)" index='1' class="radios"
											style="width: 20px;height: 20px;" src="./images/noChoose.png" alt="">
									</div>
								</div>
								<div class="payment-method">
									<div class="payment-method-left">
										<img style="width: 24px;height: 24px;" src="./images/huabei.png" alt="">
									</div>
									<div class="payment-method-right">
										<div style="color: #333333;font-size: 14px;">花呗分期</div>
										<img onclick="choosePay(this)" index='2' class="radios"
											style="width: 20px;height: 20px;" src="./images/noChoose.png" alt="">
									</div>
								</div>
								<div class="payment-method">
									<div class="payment-method-left">
										<img style="width: 24px;height: 24px;" src="./images/zfb.png" alt="">
									</div>
									<div class="payment-method-right">
										<div style="color: #333333;font-size: 14px;">支付宝支付</div>
										<img onclick="choosePay(this)" index='3' class="radios"
											style="width: 20px;height: 20px;" src="./images/noChoose.png" alt="">
									</div>
								</div>
								<div class="payment-method">
									<div class="payment-method-left">
										<img style="width: 24px;height: 24px;" src="./images/bankCard.png" alt="">
									</div>
									<div class="payment-method-right">
										<div style="color: #333333;font-size: 14px;">银行卡支付</div>
										<img onclick="choosePay(this)" index='4' class="radios"
											style="width: 20px;height: 20px;" src="./images/noChoose.png" alt="">
									</div>
								</div>
								<div class="payment-method">
									<div class="payment-method-left">
										<img style="width: 24px;height: 24px;" src="./images/yinlian.png" alt="">
									</div>
									<div class="payment-method-right" style="line-height: 48px;border: 0;">
										<div style="color: #333333;font-size: 14px;">银联</div>
										<img onclick="choosePay(this)" index='5' class="radios"
											style="width: 20px;height: 20px;" src="./images/noChoose.png" alt="">
									</div>
								</div>
							</div>
						
							<button onclick="confirmPay()" style="position: fixed; bottom: 20px; width: calc( 100% - 30px);" class="bottom-button">确认支付</button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 金额明细弹窗 -->
		<div id="moneyDetailPop" style="height: 80%;" class="mui-popover mui-popover-action mui-popover-bottom">
			<div id="travelReminder" onclick="showCloseDetailMoney()" class="travel-reminder">
				<img id="closePop" class="popClose" src="./images/close.png" alt="">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="popTitle">费用明细</div>
						<div style="width: 100%;height: 73%; overflow-y: scroll;margin-top: 10px;padding:0 15px">
							<div class="item">
								<div class="item-content" style="font-size: 13px">
									<div style="color:#000000">在线支付</div>
									<div style="color: #D9001B;">￥119</div>
								</div>
								<div></div>
								<div class="item-content" style="font-size: 13px;color:#000000">
									<div>房费</div>
									<div>1晚1间共￥229</div>
								</div>
								<div class="item-content">
									<div>2023-04-01 无餐食</div>
									<div class="">1×￥229</div>
								</div>
								<div class="item-content">
									<div>2023-04-01 无餐食</div>
								</div>
								<div class="item-content">
									<div>2023-04-01 无餐食</div>
								</div>
							</div>

							<div class="item">
								<div class="item-content" style="font-size: 13px;color:#000000">
									<div>享受优惠</div>
									<div>共-￥229</div>
								</div>

								<div class="item-content">
									<div>门店新客立减</div>
									<div>-￥51</div>
								</div>
								<div class="item-content">
									<div>体验白金特权立减</div>
									<div>-￥31</div>
								</div>
								<div class="item-content">
									<div>平台优惠立减</div>
									<div>-￥31</div>
								</div>
							</div>
							<div class="item" style="border: 0;">
								<div class="item-title">
									本单可享
								</div>
								<div class="item-content" style="font-size: 13px;color:#000000">
									<div>航班意外险</div>
									<div>约119里程</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="page-bottom">
			<div style="display: flex;flex-direction: column;align-items: flex-start">
				<div>
					<span class="pay-font">在线支付</span>
					<span class="price-font">￥880</span>
				</div>
				<div>
					<span class="reduce-font">已减</span>
					<span class="price-font">￥5</span>
				</div>
			</div>
			<div style="display: flex;align-items: center;">
				<div onclick="showCloseDetailMoney()" style="color: #02A7F0;font-size: 13px;margin-right: 15px;">明细
				</div>
				<button onclick="gotoNext()" class="bottom-button">去支付</button>
			</div>
		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/mui.picker.min.js"></script>
		<script src="js/jquery-3.5.1.min.js"></script>
		<script type="text/javascript">
			mui.init()

			function showRoomInfo() {
				alert('房型信息')
			}

			function orderRead() {
				alert('订房必读')
			}
			
			function closePay(){
				mui('#choosePay').popover('toggle');
			}

			function choosePay(e) {
				let current = $(e).attr('index')
				let arr = document.getElementsByClassName("radios");
				
				for (let i = 0; i < arr.length; i++) {
					$(arr[i]).removeClass('choose')
					$(arr[i]).attr('src', './images/noChoose.png')
					if (i == current) {
						continue;
					}
				}
				if ($(e).hasClass('choose')) {
					$(e).removeClass('choose')
					$(e).attr('src', './images/noChoose.png')
				} else {
					$(e).addClass('choose')
					$(e).attr('src', './images/choose.png')
				}
			}
		 	function confirmPay(){
				
				mui('#choosePay').popover('toggle');
			}

			function showCloseChoosePay() {
				mui('#choosePay').popover('toggle');
			}

			function showCloseDetailMoney() {
				mui('#moneyDetailPop').popover('toggle');
			}

			// 下一步按钮
			function gotoNext() {
				// 这里获取输入框的值
				$('#roomNum').val()
				$('#arrivePerson').val()
				$('#phoneNumber').val()
				console.log($('#phoneNumber').val());
				mui('#moneyDetailPop').popover('toggle');
				mui('#choosePay').popover('toggle');
			}
		</script>
	</body>

</html>
